<template>
    <div>
        <h1>一个人的信息</h1>
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <h2>性别：{{sex}}</h2>
        <button @click="sayHello">hello</button>
        <button @click="sayHello2">hello2</button>
        <button @click="test1">test1</button>

    </div>
</template>

<script>

// import {h} from "vue";

export default {
    name: 'App',

    data(){
      return {
          sex: '男'
      }
    },
    methods:{
        test1(){
            console.log(this.name)
            console.log(this.age)
            console.log(this.sex)
        },
        sayHello2(){
            alert('Hello World2! 我是'+this.name+', 年龄:'+this.age);
        }
    },
    setup(){
        let name = '张三';
        let age = 20;

        function sayHello(){
            alert(`Hello World! 我是${name}，年龄${age}`);
        }

        return {
            name,
            age,
            sayHello
        }

        // return ()=>{
        //     return h('h1', 'Hello World!');
        // }


    },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
